Frontend Monorepo: Správa pracovního prostoru Lerna a Nx

V neustále se vyvíjejícím prostředí frontend vývoje může být správa rozsáhlých a komplexních projektů značnou výzvou. Tradiční nastavení s více repozitáři, i když nabízí izolaci, může vést k duplikaci kódu, problémům se správou závislostí a nekonzistentním nástrojům. Zde se uplatňuje architektura monorepo. Monorepo je jeden repozitář obsahující více projektů, často souvisejících, které se společně sestavují a verzují. Tento přístup nabízí řadu výhod, ale efektivní správa monorepo vyžaduje specializované nástroje. Tento článek zkoumá dvě populární řešení: Lerna a Nx.

Co je Monorepo?

Monorepo je repozitář systému správy verzí, který obsahuje kód pro mnoho projektů. Tyto projekty mohou být související nebo zcela nezávislé. Klíčové je, že sdílejí stejný repozitář. Společnosti jako Google, Facebook, Microsoft a Uber úspěšně přijaly monorepo pro správu svých rozsáhlých kódových bází. Představte si, že Google ukládá téměř veškerý svůj kód, včetně Androidu, Chromu a Gmailu, do jednoho repozitáře.

Výhody Monorepo

• Sdílení a opětovné použití kódu: Snadno sdílejte kód mezi projekty bez složitých pracovních postupů balení a publikování. Představte si knihovnu designového systému, kterou lze bez problémů integrovat do více aplikací ve stejném repozitáři.
• Zjednodušená správa závislostí: Spravujte závislosti na jednom místě a zajistěte konzistenci ve všech projektech. Aktualizace závislosti sdílené knihovny automaticky aktualizuje všechny projekty, které na ní závisí.
• Atomické změny: Provádějte změny, které pokrývají více projektů, v jednom commitu, čímž zajistíte konzistenci a zjednodušíte testování. Například refaktoring, který ovlivňuje frontend i backend, lze provést atomicky.
• Vylepšená spolupráce: Týmy mohou snadno spolupracovat na různých projektech ve stejném repozitáři, čímž podporují sdílení znalostí a mezifunkční vývoj. Vývojáři mohou snadno procházet a rozumět kódu napříč různými týmy.
• Konzistentní nástroje a postupy: Vynucujte konzistentní standardy kódování, pravidla lintingu a procesy sestavování ve všech projektech. To zlepšuje kvalitu kódu a udržovatelnost.
• Zjednodušené refaktorování: Rozsáhlé refaktoringové projekty jsou zjednodušeny, protože veškerý související kód je ve stejném repozitáři. Automatizované refaktoringové nástroje lze použít v celé kódové základně.

Výzvy Monorepo

• Velikost repozitáře: Monorepo se může stát velmi rozsáhlým, což může zpomalit operace klonování a indexování. Nástroje jako `git sparse-checkout` a `partial clone` mohou pomoci tento problém zmírnit.
• Doba sestavení: Sestavení celého monorepo může být časově náročné, zejména u velkých projektů. Nástroje jako Lerna a Nx nabízejí optimalizované procesy sestavování, aby se to vyřešilo.
• Řízení přístupu: Omezení přístupu ke konkrétním částem monorepo může být složité. Je nutné pečlivé plánování a implementace mechanismů řízení přístupu.
• Složitost nástrojů: Nastavení a správa monorepo vyžaduje specializované nástroje a znalosti. Křivka učení může být zpočátku strmá.

Lerna: Správa JavaScriptových projektů v Monorepo

Lerna je populární nástroj pro správu JavaScriptových projektů v monorepo. Optimalizuje pracovní postup kolem správy repozitářů s více balíčky pomocí Git a npm. Je zvláště vhodný pro projekty, které používají npm nebo Yarn pro správu závislostí.

Klíčové vlastnosti Lerna

• Správa verzí: Lerna může automaticky verzovat a publikovat balíčky na základě změn provedených od posledního vydání. Používá konvenční commity k určení dalšího čísla verze.
• Správa závislostí: Lerna se stará o závislosti mezi balíčky a zajišťuje, že balíčky v monorepo mohou na sebe navzájem záviset. Používá symbolické odkazy k vytvoření lokálních závislostí.
• Spouštění úloh: Lerna může spouštět příkazy napříč více balíčky paralelně, což urychluje procesy sestavování a testování. Podporuje spouštění skriptů definovaných v `package.json`.
• Detekce změn: Lerna může detekovat, které balíčky se změnily od posledního vydání, což umožňuje cílené sestavování a nasazování.

Příklad použití Lerna

Ukažme použití Lerna na zjednodušeném příkladu. Předpokládejme, že máme monorepo se dvěma balíčky: `package-a` a `package-b`. `package-b` závisí na `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inicializujte Lerna:

lerna init

Tím se vytvoří `lerna.json` a aktualizuje se kořenový `package.json`. Soubor `lerna.json` konfiguruje chování Lerna.

2. Nainstalujte závislosti:

npm install
# nebo
yarn install

Tím se nainstalují závislosti pro všechny balíčky v monorepo na základě souborů `package.json` v každém balíčku.

3. Spusťte příkaz napříč balíčky:

lerna run test

Tím se spustí skript `test` definovaný v souborech `package.json` všech balíčků, které jej mají definován.

4. Publikujte balíčky:

lerna publish

Tento příkaz analyzuje historii commitů, určí, které balíčky se změnily, zvýší jejich verze na základě konvenčních commitů a publikuje je na npm (nebo ve vámi vybraném registru).

Konfigurace Lerna

Soubor `lerna.json` je jádrem konfigurace Lerna. Umožňuje přizpůsobit chování Lerna, například:

• `packages`: Určuje umístění balíčků v rámci monorepo. Často nastaveno na `[“packages/*”]`.
• `version`: Určuje strategii verzování. Může být `independent` (každý balíček má svou vlastní verzi) nebo pevnou verzi.
• `command`: Umožňuje konfigurovat možnosti pro konkrétní příkazy Lerna, jako je `publish` a `run`.

Příklad `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Inteligentní, rychlý a rozšiřitelný systém sestavování

Nx je výkonný systém sestavování, který poskytuje pokročilé funkce pro správu monorepo. Zaměřuje se na přírůstkové sestavování, ukládání do mezipaměti výpočtů a orchestraci úloh, aby se výrazně zlepšila doba sestavování a produktivita vývojářů. Zatímco Lerna se primárně zaměřuje na správu balíčků, Nx poskytuje komplexnější přístup ke správě celého pracovního postupu monorepo, včetně generování kódu, lintingu, testování a nasazování.

Klíčové vlastnosti Nx

• Přírůstková sestavení: Nx analyzuje graf závislostí vašich projektů a znovu sestavuje pouze projekty, které se změnily od posledního sestavení. To dramaticky zkracuje dobu sestavování.
• Ukládání do mezipaměti výpočtů: Nx ukládá výsledky úloh, jako jsou sestavení a testy, do mezipaměti, aby je bylo možné znovu použít, pokud se vstupy nezměnily. Tím se dále urychluje vývojový cyklus.
• Orchestrace úloh: Nx poskytuje výkonný systém orchestrace úloh, který umožňuje definovat složité build pipeline a efektivně je spouštět.
• Generování kódu: Nx poskytuje nástroje pro generování kódu, které vám mohou pomoci rychle vytvářet nové projekty, komponenty a moduly podle osvědčených postupů a konzistentních standardů.
• Ekosystém pluginů: Nx má bohatý ekosystém pluginů, který podporuje různé technologie a frameworky, jako jsou React, Angular, Node.js, NestJS a další.
• Vizualizace grafu závislostí: Nx může vizualizovat graf závislostí vašeho monorepo, což vám pomůže pochopit vztahy mezi projekty a identifikovat potenciální problémy.
• Ovlivněné příkazy: Nx poskytuje příkazy pro spouštění úloh pouze na projektech, které jsou ovlivněny konkrétní změnou. To vám umožňuje soustředit své úsilí na oblasti, které potřebují pozornost.

Příklad použití Nx

Ukažme použití Nx na zjednodušeném příkladu. Vytvoříme monorepo s aplikací React a knihovnou Node.js.

1. Nainstalujte Nx CLI globálně:

npm install -g create-nx-workspace

2. Vytvořte nový pracovní prostor Nx:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Tím se vytvoří nový pracovní prostor Nx s aplikací React. Možnost `--preset=react` říká Nx, aby inicializoval pracovní prostor s konfiguracemi specifickými pro React.

3. Vygenerujte knihovnu:

nx generate @nrwl/node:library my-library

Tím se vygeneruje nová knihovna Node.js s názvem `my-library`. Nx automaticky konfiguruje knihovnu a její závislosti.

4. Sestavte aplikaci:

nx build my-app

Tím se sestaví aplikace React. Nx analyzuje graf závislostí a znovu sestaví pouze potřebné soubory.

5. Spusťte testy:

nx test my-app

Tím se spustí jednotkové testy pro aplikaci React. Nx ukládá výsledky testů do mezipaměti, aby se urychlilo následné spuštění testů.

6. Zobrazení grafu závislostí:

nx graph

Tím se otevře webové rozhraní, které vizualizuje graf závislostí monorepo.

Konfigurace Nx

Nx se konfiguruje prostřednictvím souboru `nx.json`, který se nachází v kořenovém adresáři pracovního prostoru. Tento soubor definuje projekty v pracovním prostoru, jejich závislosti a úlohy, které na nich lze provádět.

Klíčové možnosti konfigurace v `nx.json` zahrnují:

• `projects`: Definuje projekty v pracovním prostoru a jejich konfiguraci, jako je jejich kořenový adresář a cíle sestavení.
• `tasksRunnerOptions`: Konfiguruje běžec úloh, který je zodpovědný za spouštění úloh a ukládání jejich výsledků do mezipaměti.
• `affected`: Konfiguruje, jak Nx určuje, které projekty jsou ovlivněny změnou.

Příklad `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Který si vybrat?

Lerna i Nx jsou vynikající nástroje pro správu frontend monorepo, ale uspokojují mírně odlišné potřeby. Zde je srovnání, které vám pomůže vybrat ten správný pro váš projekt:

Vlastnost	Lerna	Nx
Zaměření	Správa balíčků	Systém sestavování a orchestrace úloh
Přírůstkové sestavování	Omezené (vyžaduje externí nástroje)	Vestavěné a vysoce optimalizované
Ukládání do mezipaměti výpočtů	Ne	Ano
Generování kódu	Ne	Ano
Ekosystém pluginů	Omezené	Rozsáhlé
Křivka učení	Nižší	Vyšší
Složitost	Jednodušší	Složitější
Použití	Projekty zaměřené především na správu a publikování npm balíčků.	Velké a komplexní projekty vyžadující optimalizovanou dobu sestavování, generování kódu a komplexní systém sestavování.

Vyberte Lerna, pokud:

• Primárně potřebujete spravovat a publikovat npm balíčky.
• Váš projekt je relativně malý až střední.
• Upřednostňujete jednodušší nástroj s nižší křivkou učení.
• Již znáte npm a Yarn.

Vyberte Nx, pokud:

• Potřebujete optimalizovanou dobu sestavování a přírůstkové sestavování.
• Chcete možnosti generování kódu.
• Požadujete komplexní systém sestavování s orchestrací úloh.
• Váš projekt je velký a složitý.
• Jste ochotni investovat čas do učení se výkonnějšímu nástroji.

Můžete používat Lerna s Nx?

Ano, Lerna a Nx lze používat společně. Tato kombinace vám umožňuje využít možnosti správy balíčků Lerna a zároveň těžit z optimalizovaného systému sestavování a orchestrace úloh Nx. Nx lze nakonfigurovat jako běžec úloh pro Lerna, což poskytuje přírůstkové sestavování a ukládání do mezipaměti výpočtů pro balíčky spravované Lerna.

Nejlepší postupy pro správu frontend Monorepo

Bez ohledu na to, zda si vyberete Lerna nebo Nx, je dodržování osvědčených postupů zásadní pro úspěšnou správu frontend monorepo:

• Zavedení jasné struktury projektu: Uspořádejte své projekty logicky a konzistentně. Použijte jasnou konvenci pojmenování pro balíčky a knihovny.
• Vynucení konzistentních standardů kódování: Používejte lintery a formátovače, abyste zajistili konzistentní styl kódu ve všech projektech. Nástroje jako ESLint a Prettier lze integrovat do vašeho pracovního postupu.
• Automatizace procesů sestavování a testování: Použijte CI/CD pipeline k automatizaci procesů sestavování, testování a nasazování. Lze použít nástroje jako Jenkins, CircleCI a GitHub Actions.
• Implementace revizí kódu: Proveďte důkladné revize kódu, abyste zajistili kvalitu kódu a udržovatelnost. Používejte pull requesty a nástroje pro revizi kódu.
• Sledování doby sestavování a výkonu: Sledujte dobu sestavování a metriky výkonu, abyste identifikovali úzká hrdla a oblasti pro zlepšení. Nx poskytuje nástroje pro analýzu výkonu sestavování.
• Dokumentujte strukturu a procesy vašeho Monorepo: Vytvořte jasnou dokumentaci, která vysvětluje strukturu vašeho monorepo, použité nástroje a technologie a pracovní postupy vývoje.
• Používání konvenčních commitů: Použijte konvenční commity k automatizaci verzování a procesů vydávání. Lerna podporuje konvenční commity out-of-the-box.

Závěr

Frontend monorepo nabízí významné výhody pro správu velkých a komplexních projektů, včetně sdílení kódu, zjednodušené správy závislostí a vylepšené spolupráce. Lerna a Nx jsou výkonné nástroje, které vám mohou pomoci efektivně spravovat frontend monorepo. Lerna je skvělá volba pro správu npm balíčků, zatímco Nx poskytuje komplexnější systém sestavování s pokročilými funkcemi, jako je přírůstkové sestavování a generování kódu. Pečlivým zvážením potřeb vašeho projektu a dodržováním osvědčených postupů můžete úspěšně přijmout frontend monorepo a sklízet jeho výhody.

Nezapomeňte zvážit faktory, jako jsou zkušenosti vašeho týmu, složitost projektu a požadavky na výkon, při výběru mezi Lerna a Nx. Experimentujte s oběma nástroji a najděte ten, který nejlépe vyhovuje vašim specifickým potřebám.

Hodně štěstí s vaší cestou monorepo!